import 'package:base_plugin/base_plugin.dart';
import 'package:finance_app/generated/a.dart';
import 'package:finance_app/generated/l10n.dart';
import 'package:finance_app/src/common/app_colors.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';
import 'package:flutter_sticky_header/flutter_sticky_header.dart';
import 'package:flutter_svg/flutter_svg.dart';

class SearchInputField extends StatefulWidget {
  final String tip;
  final TextEditingController controller;
  final FocusNode focusNode;
  final bool hasError;
  final TextInputType keyboardType;
  final List<TextInputFormatter> inputFormatters;

  const SearchInputField({
    Key key,
    this.keyboardType,
    this.inputFormatters,
    this.hasError = false,
    this.tip,
    this.controller,
    this.focusNode,
  }) : super(key: key);

  @override
  _SearchInputFieldState createState() => _SearchInputFieldState();
}

class _SearchInputFieldState extends State<SearchInputField> {
  bool _showClear = false;

  @override
  void initState() {
    super.initState();
    widget.controller.addListener(() {
      if (widget.controller.text.length > 0) {
        if (_showClear == false) {
          if (mounted)
            setState(() {
              _showClear = true;
            });
        }
      } else {
        if (mounted) if (_showClear == true) {
          setState(() {
            _showClear = false;
          });
        }
      }
    });
  }

  void _onClearText() {
    widget.controller?.clear();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        margin: EdgeInsets.symmetric(
          horizontal: getDp(16),
        ),
        height: getDp(36),
        padding: EdgeInsets.symmetric(
          horizontal: getDp(12),
        ),
        decoration: BoxDecoration(
          color: aceWhiteColor,
          border: Border(),
          borderRadius: BorderRadius.circular(getDp(10)),
        ),
        child: Row(
          children: [
            SvgPicture.asset(
              A.assetsImagesLoginSearch,
              width: getDp(16),
              height: getDp(16),
            ),
            SizedBox(
              width: getDp(8),
            ),
            Expanded(
                child: TextField(
              inputFormatters: widget.inputFormatters,
              controller: widget.controller,
              focusNode: widget.focusNode,
              scrollPadding: EdgeInsets.zero,
              keyboardType: widget.keyboardType,
              style: TextStyle(
                fontSize: getSp(16),
                color: aceBlackColor,
                fontWeight: FontWeight.w400,
              ),
              decoration: InputDecoration(
                  border: InputBorder.none,
                  focusedBorder: InputBorder.none,
                  disabledBorder: InputBorder.none,
                  contentPadding: EdgeInsets.only(
                    bottom: getDp(10),
                  ),
                  hintText: widget.tip == null ? S.current.search : widget.tip,
                  labelStyle: TextStyle(
                    color: widget.hasError ? aceRedColor : aceDarkGrayColor,
                    fontWeight: FontWeight.w400,
                    fontSize: getSp(16),
                    height: 1,
                  )),
            )),
            if (_showClear)
              PressedOpacityButton(
                onPressed: _onClearText,
                child: SvgPicture.asset(
                  A.assetsImagesStyleClose,
                  width: getDp(12),
                  height: getDp(12),
                  color: aceBlackColor,
                ),
              ),
          ],
        ));
  }
}
